<template>
  <view class="container">
    <view
      style="
        background-color: #fff;
        width: 90%;
        margin: 0 auto;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
      ">
      <up-input
        v-model="params"
        shape="circle"
        placeholder="搜索联系人/电话"
        prefixIcon="search"
        clearable
        @clear="getAddress"
        prefixIconStyle="font-size: 40rpx;color: #909399"></up-input>
      <view
        style="width: 80rpx; margin-left: 10rpx; color: #8a8d93"
        @click="searchAddress">
        搜索
      </view>
    </view>
    <scroll-view class="address-box" v-if="addressList.length > 0">
      <view
        class="box-item"
        v-for="item in addressList"
        :key="item.id">
        <view class="box-left" @click="takeAddress(item)">
          <view class="address-detail">
            <view
              v-if="item.defaults === 1"
              style="width: 40rpx; height: 40rpx; display: flex">
              <up-tag text="默认" plain size="mini" type="warning"></up-tag>
            </view>
            <text style="font-size: 32rpx; margin-left: 10rpx">
              {{ item.address + '(' + item.houseNumber + ')' }}
            </text>
          </view>
          <view class="person-detail">
            <text class="name">{{ item.name + '(' + item.sex + '士)' }}</text>
            <text class="phone">{{ item.phone }}</text>
          </view>
        </view>
        <view class="box-right">
          <up-icon
            name="edit-pen"
            size="28"
            @click="editAddress(item)"></up-icon>
          <view style="width: 10rpx"></view>
          <up-icon
            name="trash"
            size="28"
            color="red"
            @click="delAddress(item.id)"></up-icon>
        </view>
      </view>
    </scroll-view>
    <!-- 收货地址为空提示 -->
    <view class="empty-box" v-else>
      <image
        src="../../static/empty_address.png"
        style="width: 600rpx; height: 400rpx"></image>
      <text class="empty-text">地址为空~</text>
    </view>
    <!-- 新增/修改地址弹框 -->
    <view class="add-address-btn" @click="addAddress">添加同城配送地址</view>
    <AddAddress ref="addRef" @success="success" />
  </view>
</template>

<script setup>
import { AddAddress } from '../../components/addAddress/addAddress.vue'
import { ref } from 'vue'
import { getAddressService, delAddressService } from '../../api/address.js'
import { useUserStore } from '../../stores/user.js'
import { onLoad } from '@dcloudio/uni-app'
const userStore = useUserStore()

// 获取收货地址信息
const addressList = ref([])
const getAddress = async () => {
  const { data } = await getAddressService(userStore.userInfo.userId)
  addressList.value = data || []
}
const select = ref(false)
onLoad((option) => {
  getAddress()
  if (option.select) {
    select.value = option.select
  } else {
    select.value = false
  }
})

// 搜索地址
const params = ref('')
const searchAddress = () => {
  const newList = addressList.value.filter(
    (item) => (item.name === params.value) || (item.phone === params.value)
  )
  addressList.value = newList
}

const addRef = ref()
// 点击新增地址按钮
const addAddress = () => {
  addRef.value.open({})
}
// 修改地址
const editAddress = (item) => {
  addRef.value.open(item)
}

// 新增或修改成功
const success = () => {
  // 重新获取 刷新列表
  getAddress()
}

// 删除收货地址
const delAddress = async (id) => {
  uni.showModal({
    title: '温馨提示',
    content: '您确定要删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await delAddressService(id)
        if (res.code === '0') {
          uni.showToast({
            title: '删除成功',
            icon: 'none',
          })
        }
        getAddress()
      }
    },
  })
}

// 点击选择地址
const takeAddress = (item) => {
  if(item.distance >= 35) {
    uni.showToast({
      title: '地址超过可配送距离',
      icon: 'none'
    })
    return false
  }
  if (!select.value) {
    return
  } else {
    let pages = getCurrentPages()
    let prevPage = pages[pages.length - 2]
    prevPage.$vm.order.userName = item.name
    prevPage.$vm.order.phone = item.phone
    prevPage.$vm.order.address = item.address + item.houseNumber
    prevPage.$vm.getAddress(item)
    uni.navigateBack({ delta: 1 })
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  .address-box {
    width: 90%;
    height: 80%;
    margin: 20rpx auto;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    .box-item {
      width: 100%;
      height: 130rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      margin: 10rpx 0;
      border-bottom: 1px solid #cacaca;
      .box-left {
        width: 80%;
        .address-detail {
          display: flex;
          margin-left: 10rpx;
        }
        .person-detail {
          color: #888888;
          font-size: 28rpx;
          margin-left: 20rpx;
          margin-top: 6rpx;
          .phone {
            margin-left: 20rpx;
          }
        }
      }
      .box-right {
        display: flex;
        align-items: center;
        margin-top: 30rpx;
      }
    }
  }
  .empty-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
    .empty-text {
      color: #888888;
      font-size: 36rpx;
    }
  }
  .add-address-btn {
    width: 90%;
    height: 60rpx;
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.08);
    margin: 10rpx auto;
    color: #f9acb4;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50rpx;
  }
}
.container::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}
</style>
